<template>
    <view class="info">
        <uni-nav-bar fixed left-icon="left" title="编辑个人资料" @clickLeft="backHandle" class="unibarS">
            <block slot="right">
                <text class="sub-btn" @click="submit">保存</text>
            </block>
        </uni-nav-bar>
        <!-- 主要内容 -->
        <view class="info-content">
            <view class="avatar-box">
                <view class="avatar-content">
                    <u-avatar
                        @click="showPhoto()"
                        size="100"
                        :src="params.data.avatar">
                    </u-avatar>
                    <view class="camera-box">
                        <u-icon name="camera-fill" color="#000000" size="18"></u-icon>
                    </view>
                </view>
            </view>
            <u--form labelPosition="left" :model="params" ref="uForm" labelWidth="70">
                <u-form-item class="item-box" label="昵称" required ref="item1">
                    <u--input v-model="params.data.nickName" border="none" placeholder="请填写"></u--input>
                </u-form-item>
                <u-form-item class="item-box" label="账号" ref="item1">
                    <view class="item-temp-box">
                        <view>{{ params.data.userName }}</view>
                    </view>
                </u-form-item>
                <u-form-item class="item-box" label="部门" ref="item1">
                    <view class="item-temp-box">
                        <view>{{ params.data.dept.deptName }}</view>
                    </view>
                </u-form-item>
                <u-form-item class="item-box" label="职务" ref="item1">
                    <view class="item-temp-box">
                        <view>{{ params.postGroup }}</view>
                    </view>
                </u-form-item>
                <u-form-item class="item-box" label="性别" @click="showSelect()" required ref="item1">
                    <view class="item-temp-box">
                        <view :class="!params.data.sex ? 'item-temp-text-empty' : ''">
                            {{ params.data.sex == 0? '男' : params.data.sex == 2 ? '女' : '未知' || '点击选择' }}
                        </view>
                    </view>
                    <u-icon slot="right" name="arrow-right"></u-icon>
                </u-form-item>
                <u-form-item class="item-box" label="生日" required @click="openCalendar()" ref="item1">
                    <view class="item-temp-box">
                        <view :class="!params.data.birthday ? 'item-temp-text-empty' : ''">
                            {{ params.data.birthday || '点击选择' }}
                        </view>
                    </view>
                    <u-icon slot="right" name="arrow-right"></u-icon>
                </u-form-item>
                <u-form-item class="item-box" label="邮箱" required ref="item1">
                    <u--input v-model="params.data.email" border="none" placeholder="请填写"></u--input>
                </u-form-item>
                <u-form-item class="item-box" label="手机" required ref="item1">
                    <u--input v-model="params.data.phonenumber" border="none" placeholder="请填写"></u--input>
                </u-form-item>
                <u-form-item class="item-box" label="微信" ref="item1">
                    <u--input v-model="params.data.wechatId" border="none" placeholder="请填写"></u--input>
                </u-form-item>
            </u--form>
        </view>
        <!-- 弹出选择菜单 -->
        <u-action-sheet :show="showActionSheet" :actions="actions" title="请选择" @close="showActionSheet = false"
            @select="sexSelect">
        </u-action-sheet>
        <!-- 选择跟进日期 -->
        <uni-calendar ref="calendar" class="uni-calendar--hook" :clear-date="true" :date="info.date"
            :insert="info.insert" @confirm="confirmCalendar" @close="closeCalendar" />
    </view>
</template>

<script>
import { upImage } from '@/common/utils'
export default {
    data() {
        return {
            postGroup: '',
            showActionSheet: false,
            params: {},
            // 弹出底部弹出菜单，展示的集合
            actions: [
                { name: '男', type: 0 },
                { name: '女', type: 1 }
            ],
            count: 4,
            value: 2,
            // 存储属性，用于保存当前正在编辑的表单项
            tempPropName: null,
            showCalendar: false,
            info: {
                insert: false,
                selected: []
            }
        }
    },
    onLoad() {
        this.getDetails()
    },

    methods: {
        getDetails() {
			this.$http.get('/system/user/profile', {}).then(res => {
				if (res.code == 200) {
                    this.params = res
				} else {
					uni.$u.toast(res.msg)
				}
			})
		},
        // 显示选择器
        showSelect() {
            this.showActionSheet = true
        },
        sexSelect(e) {
            console.log(e)
            this.params.data.sex = e.type
        },

        // 打开日历
        openCalendar() {
            this.$refs.calendar.open()
        },
        // 确定日期
        confirmCalendar(e) {
            console.log(e)
            this.params.data.birthday = e.fulldate
        },
        // 关闭日历
        closeCalendar() { },
        showPhoto() {
            let that = this
            uni.chooseImage({
                count: 1,
                sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
                sourceType: ['album'], //从相册选择
                success: function (res) {
                    // console.log(res);
                    // console.log(res.tempFilePaths);
                    upImage(res.tempFilePaths).then(res => {
                        that.params.data.avatar = res[0]
                    })
                }
            });
        },
        submit() {
            if(!this.params.data.nickName) return uni.showToast({
                title: '请输入昵称',
                icon: 'none'
            })
            if(this.params.data.sex != 0  && this.params.data.sex != 1) return uni.showToast({
                title: '请选择性别',
                icon: 'none'
            })
            if(!this.params.data.birthday) return uni.showToast({
                title: '请选择生日',
                icon: 'none'
            })
            if(!this.params.data.email) return uni.showToast({
                title: '请输入邮箱',
                icon: 'none'
            })
            if(!this.params.data.phonenumber) return uni.showToast({
                title: '请输入手机号码',
                icon: 'none'
            })
            let obj = this.params.data
            this.$http.put('/system/user/profile', obj).then(res => {
                let data = res.data
                if (data.code == 200) {
                    uni.showToast({ title: '成功', duration: 1000 });
                    setTimeout(() => {
                        uni.navigateBack()
                    }, 1000)
                } 
            })
        },
        backHandle() {
            uni.navigateBack()
        }
    }
}
</script>

<style lang="scss" scoped>

.info {
    height: 100vh;
    background: rgba(255, 255, 255, 1);
}

.info-content {
    margin: 20rpx 0;
}

.item-box {
    border-radius: 16rpx;
    background: rgba(255, 255, 255, 1);
    padding: 0 32rpx;

    /deep/.u-input__content__field-wrapper__field {
        text-align: right !important;
    }

    .rate-box,
    .item-switch {
        width: 100%;
        display: flex;
        justify-content: flex-end;
    }
}

.item-title {
    padding: 48rpx 32rpx 20rpx 32rpx;
    font-size: 32rpx;
    font-weight: 500;
    color: rgba(12, 16, 25, 1);
}

.item-temp-box {
    text-align: right;
    width: 100%;
    font-size: 30rpx;

    >view {
        // 超出隐藏
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

.item-temp-text-empty {
    font-size: 30rpx;
    font-weight: 400;
    color: rgba(100, 117, 136, 1);
}

.avatar-box {
    width: 100%;
    display: flex;
    justify-content: center;
    .avatar-content {
        position: relative;
        .camera-box {
            width: 64rpx;
            height: 64rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            position: absolute;
            bottom: 0;
            right: 0;
            background: rgba(255, 255, 255, 1);
            border-radius: 50%;
        }
    }
}
</style>